<template>
  <div id="nav">
    <!--路由出口，路由匹配的组件将渲染在这里-->
    <router-view></router-view>
    <!-- 底部导航 -->
    <NavBottom></NavBottom>
  </div>
  <!-- 
{{name}}--{{id}}--{{num}}
<button @click="change"></button> -->
</template>

<script>
import { computed, onMounted, reactive, toRefs } from "vue";
import NavBottom from "./components/NavBottom";
export default {
  components: {
    NavBottom,
  },
  setup() {
    //创建响应式数据对象，接收一个普通对象，返回一个响应式数据对象
    const state = reactive({
      id: 1,
      name: "liubing",
      num: computed(() => state.id + 1),
    });
    const change = () => {
      state.id++;
    };
    onMounted(() => {
      change();
    });
    // setup函数将响应式数据对象返回出去供模板使用
    return {
      ...toRefs(state),
      change,
    };
  },
};
</script>

<style scoped>
#nav {
  height: 500px;
  border: 1px solid red;
}
.nav-bottom {
  background-color: #67c23a;
  color: white;
  display: flex;
  /* flex-direction: row;
    justify-content: space-between; */

  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}
</style>
